<template>
  <div class="small-videl-detail">
    <div class="van_swipe">
      <!--vant van-swipe 滑动组件 -->
      <van-swipe
        :autoplay="400000"
        :show-indicators="false"
        @change="onChange"
        vertical
      >
        <van-swipe-item
          v-for="(item, index) in videoList"
          :key="index"
          class="product_swiper"
        >
          <div class="video_container">
            <video
              class="video_box"
              width="100%"
              height="100%"
              webkit-playsinline="true"
              x5-playsinline=""
              playsinline
              preload="auto"
              :src="item.src"
              :playOrPause="playOrPause"
              x-webkit-airplay="allow"
              x5-video-orientation="portrait"
              @click="pauseVideo"
              @ended="onPlayerEnded($event)"
              loop="loop"
              controls
            ></video>
            <!-- 封面 -->
            <img
              v-show="isVideoShow"
              class="play"
              @click="playvideo"
              :src="item.url"
            />
            <!-- 播放暂停按钮 -->
            <van-icon
              name="pause-circle-o"
              color="white"
              v-show="iconPauseShow"
              size="90"
              class="icon_play"
              @click="pauseVideo"
            />
            <van-icon
              name="play-circle-o"
              color="white"
              v-show="iconPlayShow"
              size="90"
              class="icon_play"
              @click="playvideo"
            />
          </div>
          <!--  右侧标签 -->
          <div class="right_tabs">
            <div>
              <span class="avatar" @click="jump(item.userID)">
                <van-image
                  :src="item.href"
                  fit='cover'
                  width="40px"
                  height="40px"
                  round
                />
              </span>
              <p></p>
              <van-icon
                name="like"
                :color="likeColor"
                size="40"
                @click="likeIt"
              />
              <p></p>
              <van-icon
                name="star"
                :color="starColor"
                size="40"
                @click="starIt"
              />
              <p></p>
              <van-icon
                name="share"
                color="white"
                size="40"
                @click="share = true"
              />
              <p></p>
              <van-icon
                name="chat"
                size="40"
                color="white"
                :badge="item.pinlun.length"
                @click="pinlun = true"
              />
              <p></p>
              <van-icon name="smile-comment" color="white" size="40" />
            </div>
          </div>
          <!--  下部信息 -->
          <div class="botton_tabs">
            <p class="video_info_title">
              {{ item.username }}
            </p>
            <p class="video_info_content">
              {{ item.msg }}
            </p>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 评论框 -->
    <van-action-sheet v-model="pinlun">
      <div class="pinglun_content" id="pinglun_content" ref="pinglun_content">
        <van-cell-group>
          <van-cell title="热门评论" class="article-title">
            <template #label>
              <van-cell
                v-for="(item, index) in videoList[current].pinlun"
                :key="index"
                :title="item.username"
              >
                <!-- 使用 icon 插槽来自定义左侧图标 -->
                <template #icon>
                  <div class="" style="margin-right: 0.23rem">
                    <van-image
                      width="2rem"
                      height="2rem"
                      fit="fill"
                      round
                      :src="item.headimage"
                    />
                  </div>
                </template>
                <template #label>
                  <div class="ping_lun_info">
                    <div class="pin_lun_detail">这是一条评论</div>
                    <div class="ping_lun_other">
                      <van-icon
                        name="good-job-o"
                        class="pinglun_label"
                        size="0.5rem"
                        :badge="item.like.length"
                        color="#ee0a24"
                      />
                      <van-tag
                        plain
                        class="pinglun_label"
                        round
                        color="#7232dd"
                        @click="detailShow = true"
                        >评论{{ item.sonPinlun.length }}</van-tag
                      >
                    </div>
                    <span class="pnglun_date">{{ item.time }}</span>
                  </div>
                </template>
              </van-cell>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </van-action-sheet>


    <!-- 评论框 -->
    <van-action-sheet v-model="detailShow" >
            <div class="content">
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field
                                v-model="message"
                                rows="8"
                                size="large"
                                type="textarea"
                                maxlength="100"
                                placeholder="您的评论..."
                                show-word-limit
                        />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block color="linear-gradient(to right, #7232dd, #ee0a24)" native-type="submit">
                            提交
                        </van-button>
                    </div>
                </van-form>
            </div>
        </van-action-sheet>


    <van-share-sheet
      v-model="share"
      title="立即分享给好友"
      :options="options"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
import { getVideo } from "../api/get";
export default {
  data() {
    return {
      videoList: [],
      msg: "",
      share: false,
      detailShow: false,
      dianzhan: true,
      likeColor: "white",
      starColor: "white",
      shoucang: true,
      current: 0,
      isVideoShow: true,
      playOrPause: true,
      video: null,
      iconPlayShow: true,
      iconPauseShow: false,
      pinlun: false,
      message:'',
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  components: {},
  methods: {
    jump(id){
      this.$router.push(`/user/${id}`)
    },
    addVideo() {
      getVideo().then((res) => {
        console.log(res);
        this.msg = res.data.data;
        this.msg.forEach((item) => {
          item.flag = false;
          this.videoList.push(item);
        });
        console.log(this.videoList[this.current]);
      });
    },
    onSelect(option) {
      Toast(option.name);
      this.share = false;
    },
    likeIt(event) {
      if (this.dianzhan) {
        Toast.success("点赞成功");
        this.dianzhan = false;
        this.likeColor = "#ee0a24";
      } else {
        Toast.success("取消成功");
        this.dianzhan = true;
        this.likeColor = "white";
      }
    },
    starIt(event) {
      if (this.shoucang) {
        Toast.success("收藏成功");
        this.shoucang = false;
        this.starColor = "goldenrod";
      } else {
        Toast.success("取消成功");
        this.shoucang = true;
        this.starColor = "white";
      }
    },
    onSubmit(values) {
      console.log('submit', values);
    },
    onChange(index) {
      //改变的时候 暂停当前播放的视频
      let video = document.querySelectorAll("video")[this.current];
      video.pause();
      this.playOrPause = false;
      this.current = index;
      //重置显示封面。图标等
      this.isVideoShow = true;
      this.iconPlayShow = true;
      this.iconPauseShow = false;
    },
    playvideo(event) {
      let video = document.querySelectorAll("video")[this.current];
      console.log("playvideo：" + this.current);
      this.isVideoShow = false;
      this.iconPlayShow = false;
      this.iconPauseShow = true;
      video.play();
      this.displayBtn();
    },
    pauseVideo(event) {
      //暂停\播放
      let video = document.querySelectorAll("video")[this.current];
      console.log("pauseVideo" + this.current);
      if (this.playOrPause) {
        video.pause();
        this.iconPlayShow = true;
        this.iconPauseShow = false;
      } else {
        video.play();
        this.iconPlayShow = false;
        this.iconPauseShow = true;
      }
      this.playOrPause = !this.playOrPause;
      this.displayBtn();
    },
    displayBtn() {
      const secounds = 1;
      let num = 0;
      const timer = setInterval(() => {
        if (num < secounds) {
          num++;
        } else {
          clearInterval(timer);
          this.iconPlayShow = false;
          this.iconPauseShow = false;
        }
      }, 1000);
    },
    onPlayerEnded(player) {
      //视频结束
      this.isVideoShow = true;
      this.current += this.current;
    },
  },
  created() {
    this.addVideo();
  },
};
</script>

<style lang="scss" scoped>
.botton_tabs {
  margin-left: 0.3rem;
  position: absolute;
  bottom: 10%;
  left: 0%;
  width: 300px;
  z-index: 999;
}
.botton_tabs .video_info_title {
  font-size: 16px;
  font-weight: 600;
  color: goldenrod;
  margin-bottom: 5px;
}
.botton_tabs .video_info_content {
  color: white;
  font-size: 14px;
}
.avatar{
  width: 40px;
  height: 40px;
  display: block;
  overflow:hidden ;
  border: 2px solid #fff;
  border-radius: 50%;
  position: relative;
  
}
.hide {
  display: none;
}
.show {
  display: block;
}

.video-player {
  height: 100vh;
  width: 100vw;
}

.product_swiper {
  width: 100vw;
  height: 100vh;
}

.van_swipe {
  width: 100vw;
  height: 94vh;
}

.van-swipe {
  width: 100%;
  height: 100%;
}

.container_box {
  width: 100vw;
  height: 100vh;
}

.video_box {
  object-fit: fill !important;
  z-index: 999;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

video {
  object-position: 0 0;
}

.icon_play {
  position: absolute;
  top: 44%;
  right: 40%;
  z-index: 999;
}

.right_tabs {
  position: absolute;
  top: 30%;
  right: 5%;
  z-index: 999;
  p {
    height: 20px;
  }
}
.play,
.platStart {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
}
/*评论*/
.ping_lun_info {
}
.article-other {
  margin-top: 0.75rem;
}
.ping_lun_info .ping_lun_other {
  margin-top:-0.08rem;
}
.ping_lun_info .ping_lun_other .pnglun_date {
  font-weight: 600;
}
.ping_lun_other {
  float: right;
  margin-top: 20px;
  .pinglun_label {
    margin-left: 0.5rem;
  }
}
</style>
